<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      z-index="3"
      title="城市列表"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 内容 -->

    <van-index-bar :index-list="indexList" :sticky-offset-top="50">
      <van-index-anchor index="#">
        当前城市
        <van-cell @click="$router.go(-1)">{{ nowcity }}</van-cell>
      </van-index-anchor>
      <van-index-anchor index="热">
        热门城市
        <van-cell
          v-for="item in hotCity"
          :key="item.label"
          @click="currentCity(item.label)"
          >{{ item.label }}</van-cell
        >
      </van-index-anchor>
      <van-index-anchor
        :index="key"
        v-for="(item, key) in specific"
        :key="item.label"
      >
        {{ key }}
        <van-cell
          :title="item.label"
          v-for="item in item"
          :key="item.label"
          @click="$toast('该城市暂无房源')"
        >
        </van-cell>
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
// info
import { city, hot, info } from '@/api/city'

import { getInfoCity, setInfoCity, removeInfoCity } from '@/utils/storage'
export default {
  async created() {
    this.nowcity = JSON.parse(getInfoCity()).label
    // console.log(this.nowcity)
    // 获取城市列表
    const { body: res } = await city(this.obj)
    // console.log(res)
    // 尝试获取右侧列表
    let arr = []
    res.forEach((item) => {
      const key = item.short[0].toUpperCase()

      // 得到重复数组
      arr.push(key)
    })
    // console.log(this.indexList)
    // 去重 排序 赋值
    arr = new Set(arr)
    arr = Array.from(arr)
    arr = arr.sort()
    // console.log(arr.sort())
    this.indexList = [...this.indexList, ...arr]
    // console.log(this.indexList)
    // 渲染数据的对象
    arr.forEach((item) => {
      this.specific[item] = []
    })
    res.forEach((item) => {
      const key = item.short[0].toUpperCase()
      this.specific[key].push(item)
    })
    // console.log(this.specific)
    // 获取热门
    const res1 = await hot()
    // console.log(res1)
    this.hotCity = res1.body
    // console.log(this.hotCity)
  },
  data() {
    return {
      // indexList: []
      // 请求城市列表的对象
      obj: {
        level: 1
      },
      // 右侧indx
      indexList: ['#', '热'],
      // 城市对象
      specific: {},
      // 热门城市
      hotCity: [],
      // 当前城市
      nowcity: ''
    }
  },
  methods: {
    async currentCity(city) {
      removeInfoCity()
      // console.log(city)
      const infoObj = { name: city }
      // console.log(infoObj)
      const res2 = await info(infoObj)
      // console.log(res2.body)
      setInfoCity(JSON.stringify(res2.body))
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
// 顶部导航
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
  .van-icon-arrow-left {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
// 右侧列表样式
/deep/ .van-index-bar__index {
  margin: 5px 0;
  font-size: 14px;
  color: #333;
}
/deep/ .van-index-bar__index--active {
  padding-right: 20px;
  color: #fff;
  background-color: #21b97a;
  border-radius: 100%;
  display: inline-block;
  font-size: 12px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}
// /deep/ .van-index-bar {
//   margin-top: 50px;
// }
/deep/ .van-index-anchor--sticky {
  color: #323233;
}
/deep/ .van-index-anchor {
  color: #9f9f9f;
}
/deep/ .van-cell {
  padding-left: 0;
  font-size: 16px;
}
</style>
